import { Tabs, Table } from "antd"
import React, { FC } from "react"
import { PagePerformanceType } from "../type"

type PropsType = {
    record: PagePerformanceType
}

const ExtendTabs: FC<PropsType> = (props: PropsType) => {
    const { record } = props

    // 动态生成 Tabs 的 items
    const items = [
        {
            key: "1",
            label: "资源加载",
            children: (
                <Table
                    columns={[
                        { title: "类型", dataIndex: "type", key: "type" },
                        { title: "URL", dataIndex: "url", key: "url", width: "500px" },
                        {
                            title: "耗时",
                            dataIndex: "duration",
                            key: "duration",
                            render: text => formatMs(text)
                        },
                        { title: "大小", dataIndex: "size", key: "size", render: text => `${text}KB` }
                    ]}
                    rowKey={(q: any) => q.uid}
                    dataSource={record?.resources || []}
                    pagination={false}
                />
            )
        },
        {
            key: "2",
            label: "长任务",
            children: (
                <Table
                    columns={[
                        {
                            title: "开始时间",
                            dataIndex: "startTime",
                            key: "startTime",
                            render: text => formatMs(text)
                        },
                        {
                            title: "耗时",
                            dataIndex: "duration",
                            key: "duration",
                            render: text => formatMs(text)
                        },
                        {
                            title: "任务类型",
                            dataIndex: "taskType",
                            key: "taskType"
                        },
                        {
                            title: "页面状态",
                            dataIndex: "pageState",
                            key: "pageState"
                        },
                        {
                            title: "超时(100ms为基准)",
                            dataIndex: "blockingTime",
                            key: "blockingTime",
                            render: text => formatMs(text)
                        }
                    ]}
                    rowKey={(q: any) => q.uid}
                    dataSource={record?.longTasks || []}
                    pagination={false}
                />
            )
        }
    ]

    return <Tabs defaultActiveKey="1" items={items} />
}

// 假设 formatMs 是一个格式化时间的函数
function formatMs(ms: number) {
    return `${Math.floor(ms)} ms`
}

export default ExtendTabs
